import React, {Component} from "react"
import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
import myfetch from '@/atool/home.js'
import './detail.scss'
import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';

import Detailfooter from '@/components/detailfooter.jsx'

import Detailheader from '@/components/detailheader.jsx'



function successToast() {
    Toast.success('加入书架成功 !!!', 2,() => {
        console.log('加入书架成功');
    },true);
}





export default class extends Component {
    constructor(props) {
        super(props);
        this.state = {
            detail: '',
            comment:[],
        date_updated:'',
            girlArr:[2],
            girl:[],
            girlArrtwo:[],
        }
    }

    componentDidMount() {




        fetch("http://read.xiaoshuo1-sm.com/novel/i.php?do=sp_get&authorId="+this.props.match.params.author+"&bookId="+this.props.match.params.id+"&fetch=merge&sqUid=8000000&source=store&size=3&page=1&shuqi_h5=&_=1525696959363").
        then((response)=>response.json()).then((data)=>{
           console.log("评论'",data)
            this.setState({
                comment:data.data
            })
        }).catch((err)=>{
            console.log(err)
        })


    //详情
        myfetch.getdetaildata(this.props.match.params.id,(data)=>{
            console.log("详情详情",data);
            var time=data[0].date_updated;
            var updatetime=Math.floor(time/1000/60/60);
            var xianshi=''
            if(updatetime<=48){
                console.log(updatetime)
                xianshi=updatetime+'小时前更新'
            }else{
                xianshi=Math.floor(updatetime/24)+'天前更新'
            }
            this.setState({
                detail:data[0],
                date_updated:xianshi
            })
        })

        //详情随机列表


    }


    refreshdata(){
        //console.log(123456)
        myfetch.getdetaildata(this.props.match.params.id,(data)=>{
          //  console.log("详情详情",data);
            var time=data[0].date_updated;
            var updatetime=Math.floor(time/1000/60/60);
            var xianshi=''
            if(updatetime<=48){
               // console.log(updatetime)
                xianshi=updatetime+'小时前更新'
            }else{
                xianshi=Math.floor(updatetime/24)+'天前更新'
            }
            this.setState({
                detail:data[0],
                date_updated:xianshi
            })
        })
    }

    addboookstore(){
        var addinstore=document.getElementById('addinstore')
        console.log(333333333)
        fetch('http://localhost:3000/api/jptj/addbookstore?id='+this.props.match.params.id).then((response)=>response.json()).then((data)=>{
            console.log(data)
            if(data.state==0){
                addinstore.style.backgroundColor='#eee'
                addinstore.style.color='#000'
                addinstore.style.border='0'

            }else{
                successToast()
            }
        }).catch((err)=>{
            console.log(err)
        })



    }

    render() {
        return (
            <div className='box1'>
                <Detailheader></Detailheader>
                <div className="content detail">

                    <div className='selection'>
                        <div className='imgbox'>
                            <div className='img1'>
                                <img src={this.state.detail.book_cover} alt=""/>
                            </div>
                            <div className='jianjie'>
                                <span className='bookname'>
                                    {this.state.detail.bookname}
                                    </span>
                                <span>{this.state.detail.author_name}</span>
                                <span>{this.state.detail.class_name}</span>
                                <span>{this.state.detail.stat_name}</span>
                            </div>
                        </div>
                    </div>

                    <div className='startread'>
                        <div>
                            <span>开始阅读</span>
                            <span>离线阅读</span>

                            <span onClick={this.addboookstore.bind(this)} id='addinstore'>加书架</span>

                        </div>
                    </div>

                    <div className='textbox'>
                        <p>{this.state.detail.book_info}</p>
                        <div className='text1'>
                            <div>
                                <span>时间</span>
                                <span className='dif'>最新</span>
                                <span>{this.state.detail.topic}</span>
                            </div>
                            <span> ></span>
                        </div>
                        <div className='text1'>
                            <div>
                                <span>时间</span>
                                <span className='dif'>目录</span>
                                <span>{this.state.date_updated}</span>
                            </div>
                            <span> ></span>
                        </div>
                    </div>
                    <div className='home_title'>
                        <span></span>
                        <p>精华评论</p>
                    </div>
                    <div className='comment'>
                        <ul>
                            {this.state.comment.map((item,index)=>{
                                return(<li key={index}>
                                    <div className='userPhoto'>
                                        <span><img src={item.userPhoto}alt=""/></span>
                                    </div>
                                    <div className='nickName'>
                                        <span>{item.nickName}</span>
                                        <span className='nicktext'>{item.text}</span>
                                    </div>
                                </li>)
                            })}
                        </ul>
                    </div>

                    <div className='home_title'>
                        <span></span>
                        <p>看了这本书的人还在看</p>
                    </div>



                    <WingBlank>

                        <WhiteSpace />
                        <Button onClick={successToast}>success</Button>

                    </WingBlank>

                </div>
                <Detailfooter></Detailfooter>
            </div>
        )
    }



}

